<template>
  <el-select
    :ref="changeRef"
    v-model:model-value="selectedValue"
    filterable
    clearable
    collapse-tags
    :loading-text="t('sys.app.menuLoading')"
    :no-match-text="t('sys.app.noMatch')"
    :no-data-text="t('sys.app.noData')"
    v-bind="getBindValue"
  >
    <!-- 具名插槽 -->
    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps"></slot>
    </template>
  </el-select>
</template>

<script setup lang="ts">
import { ZSelectInstance, ZSelectProps } from '../types'

defineOptions({ name: 'ZSelect', inheritAttrs: false })

const props = withDefaults(defineProps<ZSelectProps>(), {})

const { t } = useI18n()
const vm = getCurrentInstance()
const selectedValue = defineModel('modelValue', {
  type: [String, Number, Array, Boolean] as unknown as () =>
    | string
    | number
    | boolean
    | Array<string | number>
    | null,
  default: ['AAA', 'BBB']
})
const getBindValue = computed(() => {
  const delArr: string[] = []
  const attrs = useAttrs()
  const obj = { ...attrs }
  Object.assign(obj, props)
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

const changeRef = (selectInstance: Record<string, any> | null) => {
  if (vm) {
    vm.exposeProxy = vm.exposed = Object.assign(
      selectInstance || {},
      {} // 这里写暴露的方法
    ) as ZSelectInstance
  }
}

defineExpose((vm?.exposeProxy || {}) as ZSelectInstance)
</script>

<style lang="scss" scoped></style>
